<template>
  <div class="pannel-continer">
    <div class="pannel-content">
      <slot></slot>
    </div>
    <div class="tabbar"></div>
  </div>
</template>

<script setup>
defineProps({
  navbar: { type: Boolean, default: false },
  tabbar: { type: Boolean, default: false },
});
</script>

<style lang="scss" scoped>
.pannel-continer {
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #eff3f8;
  overflow: auto;

  // 隐藏滚动条 - Webkit浏览器 (Chrome, Safari)
  &::-webkit-scrollbar {
    display: none;
  }

  // 隐藏滚动条 - Firefox
  scrollbar-width: none;

  .pannel-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
  }
}

// 兼容IE/Edge
.pannel-continer {
  -ms-overflow-style: none;
}
</style>